<template>
<transition name="el-fade-in-linear">
  <!-- Start Main content -->
  <main class="bg-grey pt-80 pb-50 transition-box" v-show="show">
    <div class="container">
      <div class="row justify-content-center">
        <div class="col-xl-6 col-md-10">
          <div class="
              login_wrap
              widget-taber-content
              p-30
              bg-white
              border-radius-10
            ">
            <div class="padding_eight_all bg-white">
              <div class="heading_s1 text-center">
                <h3 class="mb-30 font-weight-900">登录博客</h3>
              </div>
                <div class="form-group">
                  <input type="text" required="" class="form-control" name="email" placeholder="您的邮箱"
                    v-model="user.username" />
                </div>
                <div class="form-group">
                  <input class="form-control" required="" type="password" name="password" placeholder="请输入密码"
                    v-model="user.password" />
                </div>
                <div class="login_footer form-group">
                  <div class="chek-form">
                    <div class="custome-checkbox" @click="changeRemember()">

                      <a href="#">{{this.$store.getters.getRemember?'记住我了':'没有记住我'}}</a>

                    </div>
                  </div>
                  <router-link to="forget" class="text-muted" href="#">忘记密码?</router-link>
                </div>
                <loading :loading="hasLoading"></loading>
                <div class="form-group" v-if="!hasLoading">
                  <button style="border:none; border-radius:25px;"
                    class="btn button-contactForm btn-block bg-info" @click="login()">
                    立即登录
                  </button>
                </div>
              <div class="divider-text-center mt-15 mb-15">
                <span>{{hasLoading?'正在登录':'第三方登录'}}</span>
              </div>
              <div class="flex-c-m" v-if="!hasLoading">
                <a href="#" class="login100-social-item bg1">
                  <svg class="Zi Zi--WeChat Login-socialIcon" fill="#fff" viewBox="0 0 24 24" width="40" height="40">
                    <path
                      d="M2.224 21.667s4.24-1.825 4.788-2.056C15.029 23.141 22 17.714 22 11.898 22 6.984 17.523 3 12 3S2 6.984 2 11.898c0 1.86.64 3.585 1.737 5.013-.274.833-1.513 4.756-1.513 4.756zm5.943-9.707c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272zm7.583 0c.69 0 1.25-.569 1.25-1.271a1.26 1.26 0 0 0-1.25-1.271c-.69 0-1.25.569-1.25 1.27 0 .703.56 1.272 1.25 1.272z"
                      fill-rule="evenodd"></path>
                  </svg>
                </a>

                <a href="#" class="login100-social-item bg2">
                  <svg class="Zi Zi--QQ Login-socialIcon" fill="#fff" viewBox="0 0 24 24" width="40" height="40">
                    <path
                      d="M12.003 2c-2.265 0-6.29 1.364-6.29 7.325v1.195S3.55 14.96 3.55 17.474c0 .665.17 1.025.281 1.025.114 0 .902-.484 1.748-2.072 0 0-.18 2.197 1.904 3.967 0 0-1.77.495-1.77 1.182 0 .686 4.078.43 6.29 0 2.239.425 6.287.687 6.287 0 0-.688-1.768-1.182-1.768-1.182 2.085-1.77 1.905-3.967 1.905-3.967.845 1.588 1.634 2.072 1.746 2.072.111 0 .283-.36.283-1.025 0-2.514-2.166-6.954-2.166-6.954V9.325C18.29 3.364 14.268 2 12.003 2z"
                      fill-rule="evenodd"></path>
                  </svg>
                </a>
              </div>
              <div class="text-muted text-center" v-if="!hasLoading">
                还没有账号? <router-link to="register">立即注册</router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </main>
</transition>
  <!-- End Main content -->
</template>

<script>
  // 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  import Loading from "@/components/loading";
  import bus from '../utils/bus.js';
  let Base64 = require('js-base64').Base64

  export default {

    components: {
      Loading
    },
    // 定义属性
    data() {
      return {
        show:true,
        hasLoading: false,
        user: {
          username: '',
          password: ''
        }
      };
    },
    // 计算属性，会监听依赖属性值随之变化
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 方法集合
    methods: {
      async login() {
        if (this.$commons.isEmptyString(this.user.username) || this.$commons.isEmptyString(this.user.password)) {
          return false;
        }
        if (!this.$commons.validateEmail(this.user.username)) {
        Notiflix.Report.Info( '提示', '邮箱地址有误', '好的' );
        return false;
      }
      
        // 登录
        this.hasLoading = true;
        const pram = {
          username: this.user.username,
          // 加密 this.Rsa.rsaPublicData(this.user.password)
          password: this.Rsa.encrypt(this.user.password)
        }
        // 登录结果
        var res = await this.$api.user.login(pram)
        this.hasLoading = false;
        if (res.code != 20000) {
          // 恢复操作
          // 登录失败
          return false;
        }
        this.$store.commit('SET_TOKEN', res.data.token);
        this.$store.commit('SET_ROLE', res.data.role);
        // 发送登录结果给header
        // 分发事件
        const data = {
          name:'login',
          data:null
        }
        bus.$emit('login',data);
        // this.$store.commit('SET_USER', res.data.user);
        // this.$store.commit('SET_PASSWORD', this.user.password);
        // 加载数据
        this.$router.push({
          name: 'home'
        })
        this.$forceUpdate()
        return true;
      },
      isLogin() {
        if (this.$store.getters.getRemember && this.$store.getters.getUser.id !== undefined) {
          this.user.username = this.$store.getters.getUser.username;
          this.user.password = this.$store.getters.getUser.password;
        }
      },
      changeRemember() {
        if (!this.$store.getters.getRemember) {
          this.$store.commit('SET_USER', {});
          this.$store.commit('SET_TOKEN', '');
        }
        this.$store.commit('SET_REMEMBER', !this.$store.getters.getRemember)
      },
      showMain() {
        // 监听事件
        bus.$on('showMain', res => {
          if (res.name == 'router') {
            this.show = res.data;
            this.$forceUpdate()
          }

        })
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
      this.showMain();
      this.isLogin();
    },
    beforeCreate() {}, // 生命周期 - 创建之前
    beforeMount() {}, // 生命周期 - 挂载之前
    beforeUpdate() {}, // 生命周期 - 更新之前
    updated() {}, // 生命周期 - 更新之后
    beforeDestroy() {}, // 生命周期 - 销毁之前
    destroyed() {}, // 生命周期 - 销毁完成
    activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
  };

</script>

<style>
  .flex-c-m {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    -ms-align-items: center;
    align-items: center;
  }

  .login100-social-item {
    font-size: 25px;
    color: #fff;

    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin: 5px;
  }

  .login100-social-item:hover {
    color: #fff;
    background-color: #333333;
  }

  .bg1 {
    background-color: #0a8f32;
  }

  .bg2 {
    background-color: #1da1f2;
  }

  .bg3 {
    background-color: #ea4335;
  }

</style>
